<template>
	<view class="theme-page-bg padding-20">
		<NavBar :titleObj="titleObj"></NavBar>
		<ScrollView
			:contentHeight="contentHeight"
		 >
			<template #content>
				<ShopIntro class="m-t-30" :shopIntro="shopIntro" />
				<TabScroll class="m-t-30" :tabList="tabList" />
				<view class="m-t-30 bg-w border-r30 bg-item">
					<NavTitle :titleObj="{ title: '打针服务',hidden: true }" />
					<ServiceItem :showCart="true" :showButton="true"/>
				</view>
				<view class="m-t-30 bg-w border-r30 bg-item">
					<NavTitle :titleObj="{ title: '打针套餐',hidden: true }" />
					<view class="">
						<MealItem class="m-t-30" :width="324" :height="324" :showButton="true"/>
						<MealItem class="m-t-30" :width="324" :height="324" :showButton="true"/>
					</view>
				</view>
			</template>
		</ScrollView>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/accompany/navBar/index.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import ShopIntro from '@/components/shopIntro/index.vue';
	import TabScroll from '@/components/accompany/tabbar/order/tabsScroll/index.vue'
	import NavTitle from '@/components/accompany/navTitle/navTitle.vue';
	import ServiceItem from '@/components/accompany/serviceItem/index.vue';
	import MealItem from  '@/components/accompany/tabbar/index/mealItem/index.vue';
	
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	const shopIntro = ref({
		pic: 'https://img0.baidu.com/it/u=2022043590,1237511079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
		name: '商家名称',
		followNum: '66'
	})
	
	const tabList = ref([
		{ name: '打针采血' },
		{ name: '上门换药' },
		{ name: '上门拆线' },
		{ name: '上门拆线' },
		{ name: '上门拆线' }
	])
	
	const contentHeight:Ref<number> = ref(0)
	onLoad(() => {
		console.log('onLoad')
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 44
		console.log(contentHeight)
	})
	const titleObj = {
		title: '商家名称',
		isBack: true
	}
</script>

<style lang="scss" scoped>
	.bg-item {
		padding: 20rpx 0rpx 52rpx 20rpx;
	}
</style>
